<template>
  <div class="player-bottom">
    <div class="bottom-progress">
      <!-- 开始时间 -->
      <span ref="eleCurrentTime">00:00</span>
      <!-- 进度条 -->
      <div class="progress-bar" ref="progressBar" @click="progressClick">
        <!-- 内部进度条 -->
        <div class="progress-line" ref="progressLine">
          <!-- 圆点 -->
          <div class="progress-dot"></div>
        </div>
      </div>
      <!-- 结束时间 -->
      <span ref="eleTotalTime">00:00</span>
    </div>
    <!-- 底部区域 -->
    <div class="bottom-controll">
      <div class="mode loop" ref="mode" @click="mode"></div>
      <div class="prev" @click="prev"></div>
      <div class="play" ref="play" @click="play"></div>
      <div class="next" @click="next"></div>
      <div class="favorite"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import modeType from '../../store/modeType'
import { formartTime } from '@/tools/tools'
export default {
  props: {
    totalTime: {
      type: Number,
      default: 0,
      require: true
    },
    currentTime: {
      type: Number,
      default: 0,
      require: true
    }
  },
  methods: {
    ...mapActions(['setIsPlaying', 'setModeType', 'setCurrentIndex', 'setCurrentTime']),
    // 播放按钮点击
    play () {
      this.setIsPlaying(!this.isPlaying)
    },
    // 播放模式点击
    mode () {
      // 如果是循环模式 切换单曲
      if (this.modeType === modeType.loop) {
        this.setModeType(modeType.one)
      } else if (this.modeType === modeType.one) {
        // 单曲点击变成随机
        this.setModeType(modeType.random)
      } else {
        // 随机点击变成循环
        this.setModeType(modeType.loop)
      }
    },
    // 上一首
    prev () {
      this.setCurrentIndex(this.currentIndex - 1)
    },
    // 下一首
    next () {
      this.setCurrentIndex(this.currentIndex + 1)
    },
    // 进度条的点击
    progressClick (e) {
      // 进度条左边默认的位置
      const normalLeft = e.target.offsetLeft
      // let normalLeft = this.$refs.progressBar.offsetLeft
      // 点击位置距离坐标的位置
      const eventLeft = e.pageX
      // 点击左边的位置-左边默认的位置
      const clickLeft = eventLeft - normalLeft
      // 进度条的宽度
      const progressWidth = e.target.offsetWidth
      const value = clickLeft / progressWidth
      // let progressWidth = this.$refs.progressBar.offsetWidth
      this.$refs.progressLine.style.width = value * 100 + '%'

      // 2.计算当前应该从什么地方开始播放
      const currentTime = this.totalTime * value
      // console.log(currentTime)
      this.setCurrentTime(currentTime)
    }
  },
  computed: {
    ...mapGetters(['isPlaying', 'modeType', 'currentIndex'])
  },
  watch: {
    isPlaying (newValue, oldValue) {
      // true显示暂停
      if (newValue) {
        this.$refs.play.classList.add('active')
      } else {
        this.$refs.play.classList.remove('active')
      }
    },
    // 监听单曲 循环 随机图标的变化
    modeType (newValue, oldValue) {
      if (newValue === modeType.loop) {
        // 是循环展示循环的图标 单曲展示单曲
        this.$refs.mode.classList.add('loop')
        // 移除随机图标
        this.$refs.mode.classList.remove('random')
      } else if (newValue === modeType.one) {
        this.$refs.mode.classList.add('one')
        this.$refs.mode.classList.remove('loop')
      } else {
        this.$refs.mode.classList.add('random')
        this.$refs.mode.classList.remove('one')
      }
    },
    // 歌曲总时长
    totalTime (newValue, oldValue) {
      const time = formartTime(newValue)
      this.$refs.eleTotalTime.innerHTML = time.minute + ':' + time.second
    },
    // 当前播放歌曲时长
    currentTime (newValue, oldValue) {
      // 格式当前播放的时间
      const time = formartTime(newValue)
      this.$refs.eleCurrentTime.innerHTML = time.minute + ':' + time.second
      // 根据当前播放时间计算比例
      const value = newValue / this.totalTime * 100
      this.$refs.progressLine.style.width = value + '%'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable.scss";
@import "@/assets/css/mixin.scss";
.player-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  .bottom-progress {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .progress-bar {
    width: 100%;
    margin: 0 10px;
    height: 10px;
    background: #fff;
    .progress-line {
      width: 0%;
      height: 100%;
      background: #ccc;
      position: relative;
      .progress-dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .bottom-controll {
    width: 80%;
    margin: 0 auto;
    padding: 50px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      width: 84px;
      height: 84px;
    }
    .mode {
      &.loop {
        @include bg_img("../../assets/images/loop");
      }
      &.one {
        @include bg_img("../../assets/images/one");
      }
      &.random {
        @include bg_img("../../assets/images/shuffle");
      }
    }
    .prev {
      @include bg_img("../../assets/images/prev");
    }
    .play {
      @include bg_img("../../assets/images/play");
      &.active {
        @include bg_img("../../assets/images/pause");
      }
    }
    .next {
      @include bg_img("../../assets/images/next");
    }
    .favorite {
      @include bg_img("../../assets/images/un_favorite");
      &.active {
        @include bg_img("../../assets/images/favorite");
      }
    }
  }
}
</style>
